<template>
    <view>
        <!-- <view class="amount-input" style="margin: 10rpx 70rpx">
      <input
        class="input"
        type="number"
        v-model="num"
        :disabled="!(amount.length - 1 == active)"
        placeholder="请输入充值金额"
        placeholder-class="placeholder-item"
        @input="getInput"
    />
    </view> -->
        <view class="amount" style="margin-bottom: 10rpx">
            <view class="item-amount" :class="[active == index ? 'active' : '']" v-for="(item, index) in amount"
                :key="index" @click="active = index">{{ item.name }}</view>
        </view>

        <view class="amount-box" style="margin-top: 0rpx">
            <view style="padding: 20rpx 0; font-size: 30rpx">充值代表已阅读并同意充值须知</view>
            <view style="color: red; padding: 20rpx 0; font-size: 14px">充值须知：</view>
            <view class="content">1、基于充值活动的特殊性，储值之后不支持退款；</view>
            <view class="content">2、若出现单笔订单或单个商品扣费金额错误等情况，将由客服人员进行核实后，所退金额将原路返回到储值余额中；</view>
            <view class="content">3、储值资金可在“来米零售”小程序“我的－我的余额”中查询，所储值余额不可提现，不计利息，不可转赠；</view>
            <view class="content">4、储值资金仅可于“辻粤味”旗下的自动售货机设备进行使用；</view>
            <view class="content">
                5、本次储值活动解释权归“辻粤味”所有，“来米零售”仅作为自动售货机供应商为“辻粤味”提供技术支持服务</view>
        </view>
        <view class="amount-box" @click="topUp">
            <button class="buttonTopUp">立刻充值</button>
        </view>
    </view>
</template>
<script>
    import appconf from "@/common/appconf.js";
    const domain = appconf.domain;
    export default {
        data() {
            return {
                isReadonly: true,
                active: 100,
                num: "",
                activity_id: "",
                amount: [{
                        count: 100,
                        name: "100元"
                    },
                    {
                        count: 200,
                        name: "200元"
                    },
                    {
                        count: 300,
                        name: "300元"
                    },
                    {
                        count: 400,
                        name: "400元"
                    },
                    {
                        count: 500,
                        name: "500元"
                    },
                    // { count: null, name: "自定义金额" },
                ],
                code: "",
            };
        },
        created() {
            if (uni.getStorageSync("userId")) return;
            uni.showModal({
                title: "授权",
                content: "是否授权",
                success: () => {
                    this.getUserInfo();
                },
            });
        },
        onLoad({
            activity_id
        }) {
            // if (option.q) {
            //   var scene = decodeURIComponent(option.q); // 使用decodeURIComponent解析  获取当前二维码的网址 // scene.decodeURL()
            //   console.log("当前小程序码的地址", scene);
            //   var params = scene.split("=");
            //   console.log("活动id:" + params);
            // }
            this.activity_id = activity_id;
        },
        methods: {
            getInput({
                target
            }) {
                // this.num = parseInt(target.value);
                this.amount[this.active].count = this.num;
            },
            // 获取用户信息
            getUserInfo(e) {
                uni.getUserProfile({
                    desc: "获取用户信息",
                    success: (res) => {
                        console.log("用户信息", res);
                        uni.setStorageSync("nickName", res.userInfo.nickName);
                        this.login();
                    },
                });
            },
            // 登录获取code
            login() {
                uni
                    .login({
                        provider: "使用微信登录", //使用微信登录
                    })
                    .then((data) => {
                        console.log("登录哈哈哈107", data);
                        this.code = data[1].code;
                        this.getOpenId();
                    });
            },
            // 获取userId
            getOpenId() {
                let data = {
                    code: this.code,
                };
                this.$request(this.$api.ActionLogin, data, "GET").then((res) => {
                    uni.setStorageSync("openId", res.data.openId);
                    uni.setStorageSync("userId", res.data.userId);
                    if (res.returnCode === "SUCCESS") {
                        uni.showToast({
                            title: "授权成功!",
                        });
                    }
                });
            },
            topUp() {
                let count = this.amount[this.active]?.count;
                if (!count) {
                    uni.showToast({
                        title: "请选择充值金额",
                        icon: "error",
                    });
                    return;
                }
                uni.navigateTo({
                    url: `pay?count=${count}&activity_id=${this.activity_id}`,
                    // url: "pay?count=" + count,
                });
            },
        },
    };
</script>
<style>
    .content {
        margin: 10rpx 20rpx;
        font-size: 14px;
    }

    .amount {
        text-align: center;
        overflow: hidden;
        margin: 50rpx;
    }

    .amount-input {
        border: 1px solid rgb(181, 178, 178);
        height: 60rpx;
        margin: 73rpx;
        background-color: #fff;
    }

    .amount-box {
        margin: 70rpx;
        background-color: #fff;
    }

    .placeholder-item {
        margin: 6rpx;
        margin-left: 30rpx;
    }

    .item-amount {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid rgb(181, 178, 178);
        width: 25%;
        margin: 20rpx;
        height: 100rpx;
        float: left;

        border-radius: 8rpx;
    }

    .active {
        background-color: #fbeb60;
        font-size: 30rpx;
    }

    .buttonTopUp {
        background-color: #fbeb60;
        font-size: 32rpx;
        height: 50px;
        width: 185px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 8rpx;
    }
</style>